<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery多种百叶窗风格切换焦点图插件DEMO演示</title>

    <link rel="stylesheet" href="css/shutter.css">

</head>
<body>

<div class="shutter">
    <div class="shutter-img">
        <a href="#" data-shutter-title="Iron Man"><img src="images/shutter_1.jpg" alt="#"></a>
        <a href="#" data-shutter-title="Super Man"><img src="images/shutter_2.jpg" alt="#"></a>
        <a href="#" data-shutter-title="The Hulk"><img src="images/shutter_3.jpg" alt="#"></a>
        <a href="#" data-shutter-title="The your"><img src="images/shutter_4.jpg" alt="#"></a>
    </div>
    <ul class="shutter-btn">
        <li class="prev"></li>
        <li class="next"></li>
    </ul>
    <div class="shutter-desc">
        <p>Iron Man</p>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/velocity.js"></script>
<script src="js/shutter.js"></script>
<script>
    $(function () {
        $('.shutter').shutter({
            shutterW: 1000, // 容器宽度
            shutterH: 358, // 容器高度
            isAutoPlay: true, // 是否自动播放
            playInterval: 3000, // 自动播放时间
            curDisplay: 3, // 当前显示页
            fullPage: false // 是否全屏展示
        });
    });
</script>

<div style="text-align:center;clear:both">
</div>
</body>
</html>